<template>
  <div class="main-container">
    <div class="left">
      <div class="info">
        <div class="avatar">
          <!-- <img src="@/assets/images/logo.png"/> -->
        </div>
        <div class="name">
          <p class="shop-name"><iconpark-icon name="gold-medal"></iconpark-icon>喜德盛XDS</p>
          <p class="user-name">王恩泽</p>
        </div>
      </div>
      <div class="option">
        <ul>
          <el-tooltip
            effect="dark"
            content="置顶"
            placement="bottom"
          >
            <li><iconpark-icon name="label"></iconpark-icon></li>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="删除"
            placement="bottom"
          >
            <li><iconpark-icon name="delete-one"></iconpark-icon></li>
          </el-tooltip>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="r-top">
        <el-button class="btn">热销 250</el-button>
      <div class="more">查看更多 ></div></div>
      <ul>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="main-container">
    <div class="left">
      <div class="info">
        <div class="avatar">
          <!-- <img src="@/assets/images/logo.png"/> -->
        </div>
        <div class="name">
          <p class="shop-name"><iconpark-icon name="gold-medal"></iconpark-icon>喜德盛XDS</p>
          <p class="user-name">王恩泽</p>
        </div>
      </div>
      <div class="option">
        <ul>
          <el-tooltip
            effect="dark"
            content="置顶"
            placement="bottom"
          >
            <li><iconpark-icon name="label"></iconpark-icon></li>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="删除"
            placement="bottom"
          >
            <li><iconpark-icon name="delete-one"></iconpark-icon></li>
          </el-tooltip>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="r-top">
        <el-button class="btn">热销 250</el-button>
      <div class="more">查看更多 ></div></div>
      <ul>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="main-container">
    <div class="left">
      <div class="info">
        <div class="avatar">
          <!-- <img src="@/assets/images/logo.png"/> -->
        </div>
        <div class="name">
          <p class="shop-name"><iconpark-icon name="gold-medal"></iconpark-icon>喜德盛XDS</p>
          <p class="user-name">王恩泽</p>
        </div>
      </div>
      <div class="option">
        <ul>
          <el-tooltip
            effect="dark"
            content="置顶"
            placement="bottom"
          >
            <li><iconpark-icon name="label"></iconpark-icon></li>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="删除"
            placement="bottom"
          >
            <li><iconpark-icon name="delete-one"></iconpark-icon></li>
          </el-tooltip>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="r-top">
        <el-button class="btn">热销 250</el-button>
      <div class="more">查看更多 ></div></div>
      <ul>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
        <li class="good">
          <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
          <p>￥110.0</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>

</script>
<style scoped lang="less">
.main-container {
  display: flex;
  height: 260px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(174, 174, 174);
  .left {
    width: 30%;
    height: 100%;
    display: flex;
    padding-top: 60px;
    justify-content: space-around;
    .info {
      display: flex;
      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: white;
      }
      .name {
        margin: 10px;
        .shop-name {
          font-size: 16px;
        }
        .user-name {
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
    .option {
      width: 60px;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          font-size: 20px;
        }
      }
    }
  }
  .right {
    width: 70%;
    .r-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .btn {
        background-color: @mainColor;
        color: white;
        cursor: default;
      }
      .more {
        cursor: pointer;
        &:hover {
          color: @mainColor;
        }
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      .good {
        width: 20%;
        padding-top: 15px;
        p {
          text-align: center;
          margin: 10px 0;
          color: red;
        }
      }
    }
  }
}
</style>